<template>
  <div class="statics">
      <group>
        <datetime @on-change="dateChange" v-model="startTime" title="开始时间"></datetime>
      </group>
      <group>
        <datetime @on-change="dateChange" v-model="endTime" title="结束时间"></datetime>
      </group>
      <scroller style="top:114px;">
        <div style="padding-bottom:130px">
          <group>
              <x-table :full-bordered="true" :cell-bordered="true" style="background-color:#fff;">
                <thead style="background-color: #f1f1f1;">
                <tr>
                    <th width="33.33%">日期</th>
                    <th width="33.33%">订单数</th>
                    <th>订单金额</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(i,index) in tableData.list" :key="index">
                    <td>{{i.time}}</td>
                    <td>{{i.num}}</td>
                    <td>￥{{i.order_money}}</td>
                </tr>
                </tbody>
            </x-table>
          </group>
        </div>
      </scroller>
  </div>
</template>
<script>
import { Group, Datetime, XTable } from "vux";
export default {
  name: "statics",
  data() {
    return {
      startTime: new Date().toLocaleDateString("CH").replace(/\//g, "-"),
      endTime: new Date().toLocaleDateString("CH").replace(/\//g, "-"),
      tableData: {}
    };
  },
  methods: {
    orderData() {
      this.$http
        .get("/api/supplier.fin_report/index", {
          params: {
            step_section: "search",
            time_s: this.startTime,
            time_e: this.endTime
          }
        })
        .then(res => {
          var data = { list: [] };
          for (const key in res.data.data) {
            if (key != "total") {
              data.list.push({
                time: key,
                num: res.data.data[key].num,
                order_money: res.data.data[key].order_money
              });
            }
          }
          data.total = res.data.data.total;
          this.tableData = data;
        });
    },
    dateChange() {
      this.orderData();
    }
  },
  created() {
    this.orderData();
  },
  components: {
    Group,
    Datetime,
    XTable
  }
};
</script>
<style scoped>

</style>